<template>
  <div>
    <el-row class="secondRow" v-if="tagsShow">
      <el-button type="info" icon="el-icon-caret-right" @click="showGroups" round>标签分组管理</el-button>
      <el-button type="primary" @click="showDialog">新增标签</el-button>
      <el-dropdown trigger="click" @command="bsatchOperation">
        <span class="el-dropdown-link">
          标签批量管理
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="setGroup">批量分组</el-dropdown-item>
          <el-dropdown-item command="delBatch">批量删除</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-row>
    <el-row class="secondRow" v-if="groupShow">
      <el-button type="info" icon="el-icon-caret-left" @click="showTags" round>标签管理</el-button>
      <el-button type="primary" @click="showDialogGroup">新增标签分组</el-button>
    </el-row>

    <el-row v-if="tagsShow">
      <el-form
        :inline="true"
        :model="searchData"
        label-width="120px"
        class="demo-form-inline"
        size="small"
        label-suffix="："
      >
        <el-form-item label="标签名称">
          <el-input v-model="searchData.name" placeholder="请输入标签名称" style="width:200px;"></el-input>
        </el-form-item>

        <el-form-item label="标签分组">
          <el-select v-model="searchData.group" clearable placeholder="请选择">
            <el-option
              v-for="item in groupQuery"
              :key="item.code"
              :label="item.group_name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-button icon="el-icon-search" @click="loadTags" size="small">点击搜索</el-button>
        <el-button icon="el-icon-brush" @click="resetFrom" size="small">重置搜索</el-button>
      </el-form>
      
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100% "
        @selection-change="handleSelectionChange"
        :default-sort="{prop: 'name', order: 'descending'}"
      >
        <el-table-column type="selection" width="55" show-overflow-tooltip></el-table-column>
        <el-table-column label="标签ID" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column prop="name" sortable label="标签名称" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column prop="group" sortable label="标签分组ID" show-overflow-tooltip></el-table-column>
        <el-table-column prop="group_name" label="标签分组名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="remark" label="标签描述" show-overflow-tooltip></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="delTag(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row v-if="groupShow">
      <el-table :data="groupTable" tooltip-effect="dark" style="width: 100%" :key="Math.random()">
        <el-table-column label="标签分组编码" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.code }}</template>
        </el-table-column>
        <el-table-column prop="group_name" label="分组名称" show-overflow-tooltip></el-table-column>
        <el-table-column label="标签数量" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row['t.num'] }}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="editGroup(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="delGroup(scope.row.code)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-dialog
      title="标签分组管理"
      :visible.sync="editGroupBox"
      width="550px"
      center
      @close="resetFormVaild('groupForm')"
    >
      <el-form :model="editGroupForm" label-width="150px" ref="groupForm">
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="标签分组名称"
              prop="group_name"
              :rules="[
                  { required: true, message: '标签分组名称不能为空' ,trigger: 'blur'},
                  { max: 6, message: '控制长度小于 6 个字符', trigger: 'blur' }
              ]"
            >
              <el-input v-model="editGroupForm.group_name" style="width:300px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editGroupBox = false">取 消</el-button>
        <el-button type="primary" @click="submitEditGroup">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="标签管理"
      :visible.sync="editBox"
      width="550px"
      center
      @close="resetFormVaild('tagForm')"
    >
      <el-form :model="editForm" label-width="100px" ref="tagForm">
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="标签名称"
              prop="name"
              :rules="[
                  { required: true, message: '标签名不能为空' ,trigger: 'blur'},
                  { max: 6, message: '控制长度小于 6 个字符', trigger: 'blur' }
              ]"
            >
              <el-input v-model="editForm.name" style="width:300px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="标签分组"
              prop="group"
              :rules="[
                  { required: true, message: '请选择分组' ,trigger: 'blur'},
              ]"
            >
              <el-select v-model="editForm.group" style="width:300px" filterable>
                <el-option
                  v-for="item in tagGroup"
                  :key="item.code"
                  :label="item.group_name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="描述">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                style="width:300px"
                v-model="editForm.remark"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editBox = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="批量标签分组" :visible.sync="batchTagGroup" width="550px" center>
      <el-form :model="batchGroup" label-width="100px" ref="batchGroupForm">
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="标签分组"
              prop="group"
              :rules="[
                  { required: true, message: '请选择分组' ,trigger: 'blur'},
              ]"
            >
              <el-select v-model="batchGroup.group" style="width:300px" filterable>
                <el-option
                  v-for="item in tagGroup"
                  :key="item.code"
                  :label="item.group_name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="batchTagGroup = false">取 消</el-button>
        <el-button type="primary" @click="submitTagGroup">确 定</el-button>
      </div>
    </el-dialog>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[15, 30, 50, 100]"
        :page-size="15"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      groupTable: [],
      total: 0, //标签总数
      dialogFormVisible: false,
      tagGroup: [],
      editBox: false,
      tagsShow: true,
      groupShow: false,
      batchTag: false,
      batchTagGroup: false,
      batchTagDel: false,
      editGroupBox: false,
      editId: -1,
      searchData: {},
      groupQuery: [],
      editGroupForm: {
        code: "",
        group_name: ""
      },
      batchGroup: {
        group: "",
        group_name: ""
      },
      pageSet: {
        pageNo: "1", //默认第一页
        pageSize: "15" //每页15条
      },
      editForm: {
        id: "",
        name: "",
        group: "",
        group_name: "",
        remark: ""
      },
      multipleSelection: []
    };
  },
  mounted() {
    this.loadTags();
    this.axios
      .post("/group/groupTableList")
      .then(res => {
        if (res.code == 200) {
          this.groupQuery = res.rows;
        }
      })
      .catch(() => {
        this.$message.error("获取标签分组失败");
      });
  },
  methods: {

    /**
     * @author: Shihh
     * @description: 
     * @param {type} 
     * @return: 
     */    
    resetFrom() {
      for (var key in this.searchData) {
        this.searchData[key] = "";
      }
      this.pageSet.pageNo = 1;
      this.loadTags();
    },



    /**
     * @author: Shihh
     * @description: 删除分组修改分组关联标签信息
     * @param {type}
     * @return:
     */
    delGroup(paras) {
      let data = { groupId: paras };
      this.$confirm(
        "此操作将删除分组及修改标签的分组信息为其他, 请慎重！",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.axios
            .post("/group/groupDel", data)
            .then(res => {
              if (res) {
                this.loadGroups();
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }
            })
            .catch(() => {
              this.$message.error("删除失败");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    resetFormVaild(formName) {
      if (formName == "tagForm") {
        this.editBox = false;
      } else if (formName == "groupForm") {
        this.editGroupBox = false;
      }
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
        if (formName == "tagForm") {
          this.editForm = this.resetForm();
        } else if (formName == "groupForm") {
          this.editGroupForm = this.resetGroupForm();
        }
      });
    },
    showDialogGroup() {
      this.editGroupBox = true;
      this.editGroupForm = this.resetGroupForm();
      this.editId = -1;
    },
    /**
     * @author: Shihh
     * @description: 编辑标签
     * @param {type}
     * @return:
     */
    submitEditGroup() {
      this.$refs["groupForm"].validate(valid => {
        if (valid) {
          if (this.editId != -1) {
            this.axios
              .post("/group/editGroup", this.editGroupForm)
              .then(res => {
                if (res) {
                  this.$message.success("修改标签分组成功");
                  this.loadGroups();
                }
              })
              .catch(() => {
                this.$message.error("修改标签分组失败");
              });
            this.editGroupForm = this.resetGroupForm();
            this.editGroupBox = false;
            this.editId = -1;
          } else {
            this.axios
              .post("/group/saveGroup", this.editGroupForm)
              .then(res => {
                if (res.code == 200) {
                  this.$message.success(res.msg);
                  this.loadGroups();
                } else if (res.code == 201) {
                  this.$message.error(res.msg);
                  this.loadGroups();
                }
              })
              .catch(() => {
                this.$message.error("新增标签失败");
              });
            this.editGroupForm = this.resetGroupForm();
            this.editGroupBox = false;
          }
        }
      });
    },

    /**
     * @author: Shihh
     * @description: 编辑分组
     * @param {type}
     * @return:
     */
    editGroup(value) {
      this.editGroupForm = Object.assign(this.editGroupForm, value);
      this.editGroupBox = true;
      this.editId = this.editGroupForm.code;
    },

    //删除标签
    delTag(paras) {
      let delIds = [];
      delIds.push(paras);
      this.$confirm("此操作将删除标签及标签与图片关联, 请慎重?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.axios
            .post("/tag/batchTagsDel", delIds)
            .then(res => {
              if (res) {
                this.loadTags();
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }
            })
            .catch(() => {
              this.$message.error("删除失败");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //批量设置标签分组
    submitTagGroup() {
      this.$refs["batchGroupForm"].validate(valid => {
        if (valid) {
          var target = this.batchGroup.group;
          var data = this.tagGroup.filter(function(item) {
            return item.code == target;
          });
          this.batchGroup.group_name = data[0].group_name;
          let tagIds = [];
          for (var index in this.multipleSelection) {
            tagIds.push(this.multipleSelection[index].id);
          }
          let modifyData = {
            tagIds: tagIds,
            groupInfo: this.batchGroup
          };
          this.axios
            .post("/tag/batchTagsGroup", modifyData)
            .then(res => {
              if (res[0] > 0) {
                this.$message.success("设置标签分组成功");
                this.loadTags();
                for (var key in this.batchGroup) {
                  this.batchGroup[key] = "";
                }
                this.batchTagGroup = false;
              }
            })
            .catch(() => {
              this.$message.error("设置标签分组失败");
            });
        }
      });
    },
    //批量设置分组前置条件
    setGroupBulk() {
      if (this.multipleSelection.length < 1) {
        this.$message.error("请先选择需要进行操作的标签");
        return;
      } else {
        this.axios
          .post("/group/groupList")
          .then(res => {
            if (res.code == 200) {
              this.tagGroup = res.rows;
            }
          })
          .catch(() => {
            this.$message.error("获取标签分组失败");
          });
        this.batchTagGroup = true;
      }
    },
    //批量删除标签
    delBatchTag() {
      if (this.multipleSelection.length < 1) {
        this.$message.error("请先选择需要进行操作的标签");
        return;
      }
      let delIds = [];
      for (var index in this.multipleSelection) {
        delIds.push(this.multipleSelection[index].id);
      }
      this.$confirm("此操作将删除标签及标签与图片关联, 请慎重?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.axios
            .post("/tag/batchTagsDel", delIds)
            .then(res => {
              if (res) {
                this.loadTags();
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }
            })
            .catch(() => {
              this.$message.error("删除失败");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //下拉选择事件
    bsatchOperation(command) {
      if (command == "setGroup") {
        this.setGroupBulk();
      } else if (command == "delBatch") {
        this.delBatchTag();
      }
    },
    //显示TAG表
    showTags() {
      (this.groupShow = false), //关闭分组
        (this.tagsShow = true); //开启标签
      this.loadTags();
      this.multipleSelection.length = 0;
    },
    //显示GROUP表
    showGroups() {
      this.tagsShow = false; //关闭tagTable
      (this.groupShow = true), //开启分组
      this.loadGroups();
      this.multipleSelection.length = 0;
    },
    //重置tag表单
    resetForm() {
      return {
        id: "",
        name: "",
        group: "",
        group_name: "",
        remark: ""
      };
    },
    resetGroupForm() {
      return {
        code: "",
        group_name: ""
      };
    },
    //提交新增/修改tag
    submitEdit() {
      this.$refs["tagForm"].validate(valid => {
        if (valid) {
          var target = this.editForm.group;
          var data = this.tagGroup.filter(function(item) {
            return item.code == target;
          });
          this.editForm.group_name = data[0].group_name;
          if (this.editId != -1) {
            this.axios
              .post("/tag/editTag", this.editForm)
              .then(res => {
                if (res.code == 200) {
                  this.$message.success(res.msg);
                  this.loadTags();
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch(() => {
                this.$message.error("修改标签失败");
              });
            this.editBox = false;
            this.editId = -1;
            this.editForm = this.resetForm();
          } else {
            this.axios
              .post("/tag/saveTag", this.editForm)
              .then(res => {
                if (res.code == 200) {
                  this.$message.success(res.msg);
                  this.loadTags();
                } else if (res.code == 201) {
                  this.$message.error(res.msg);
                  this.loadTags();
                }
              })
              .catch(() => {
                this.$message.error("新增标签失败");
              });
            this.editBox = false;
            this.editForm = this.resetForm();
          }
        }
      });
    },
    //修改tag获取详情
    edit(value) {
      this.editForm = Object.assign(this.editForm, value);
      this.editBox = true;
      this.editId = this.editForm.id;
      this.axios
        .post("/group/groupList")
        .then(res => {
          if (res.code == 200) {
            this.tagGroup = res.rows;
          }
        })
        .catch(() => {
          this.$message.error("获取标签分组失败");
        });
    },

    //选择框
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (this.multipleSelection.length > 0) {
        this.batchTag = true;
      } else {
        this.batchTag = false;
      }
    },
    //分页数据
    handleSizeChange(val) {
      this.pageSet.pageSize = val;
      if (this.tagsShow) {
        this.loadTags();
      } else {
        this.loadGroups();
      }
    },
    //分页
    handleCurrentChange(val) {
      this.pageSet.pageNo = val;
      if (this.tagsShow) {
        this.loadTags();
      } else {
        this.loadGroups();
      }
    },

    //显示修改弹出框
    showDialog() {
      this.editBox = true;
      this.editForm = this.resetForm();
      this.editId = -1;
      this.axios
        .post("/group/groupList")
        .then(res => {
          if (res.code == 200) {
            this.tagGroup = res.rows;
          }
        })
        .catch(() => {
          this.$message.error("获取标签分组失败");
        });
    },
    //加载分组列表
    loadGroups() {
      this.axios
        .post("/group/groupTableList")
        .then(res => {
          if (res.code == 200) {
            this.groupTable = res.rows;
            this.total=res.count
          }
        })
        .catch(() => {
          this.$message.error("获取标签分组失败");
        });
    },
    //加载tag列表
    loadTags() {
      this.axios
        .post("/tag/getTags", {pageSet:this.pageSet,searchData:this.searchData})
        .then(res => {
          if (res.code == 200) {
            this.tableData = res.rows;
            this.total=res.count
          }
        })
        .catch(() => {
          this.$message.error("获取列表失败");
        });
    }
  }
};
</script>

<style lang="less" scoped>
.parent-name {
  font-weight: bold;
  font-size: 18px;
}
.secondRow {
  margin-top: 0px;
  margin-bottom: 15px;
  .el-dropdown:not(:first-child) {
    margin-left: 15px;
  }
  .el-dropdown {
    width: 160xp;
    padding: 5.5px 15px;
    border-radius: 3px;
    color: #fff;
    background-color: #476dbe;
    border-color: #476dbe;
    .el-dropdown-link[data-v-5110e31c] {
      color: #fff;
    }
  }
  .el-button {
    width: 160xp;
    padding: 5.5px 15px;
  }
}
</style>
